{extend name="base/common"/}
{block name="style"}
<link href="__HOME__/base/css/bootstrap-datetimepicker.css" rel="stylesheet">
{/block}
{block name="script"}
<script type="text/javascript" src="__STATIC__/static/jquery.pin.js"></script>
<script type="text/javascript" src="__HOME__/base/js/bootstrap-datetimepicker.min.js"></script>
<!--图像固定插件 -->
<script>
    $(".dc-img").pin({
        containerSelector: "#dc-container",
    })
</script>
<!--时间选择插件-->
<script type="text/javascript">
    $(".form_datetime").datetimepicker({
        format: 'yyyy-mm-dd hh:ii',
        startDate:new Date(),
        todayHighlight:true,
    }).on('changeDate',function(event){
        $("#appoint-btn").attr('disabled',false);
        $("#appoint-btn").removeClass('btn-danger');
        $("#appoint-btn").addClass('btn-default');
    });

</script>

{/block}
{block name="body"}
<!-- Doctor single -->
<div class="ptb80">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12">
                <h1 class="heading-title">教师 预约</h1><h4 class="sub-title mb30">Appointment</h4>
            </div>
        </div>
        <div class="row" id="dc-container">
            <div class="col-md-4">
                <img src="{$info.cover_id|get_cover='path'}" class="img-reposive img-circle dc-img mb50" alt="" />
            </div>
            <div class="col-md-8">
                <div class="dr-single-box">
                    <h3 class="dr-single-tile">{$info.name}</h3>
                    <div class="sub-tile">{$info.subject}</div>
                    <div class="dc-single-social">
                        <ul>
                            <li><a class="call-menu"> <span class="btn"><i class="fa fa-volume-control-phone mr5">{$info.tel}</i></span></a> </li>
                            {if condition="$info.icon"}
                            <li><a class="twitter"><i class="{$info.icon}"></i></a></li>
                            {/if}
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center mt50">
                        <h1 class="mb0">请选择时间 并提交预约</h1>
                        <p class="mb30">Please select time and submit an appointment.</p>
                        <form id="search_form" class="appointment-form" action="{:url('User/order_add?teacher_id='.$info.id)}">
                            <div class="appointment-btn">
                                <input size="16" type="text" name="date" value="请选择时间" readonly class="form_datetime ml10">
                                <a onclick="document.getElementById('search_form').submit();" class="btn btn-danger" disabled="true" id="appoint-btn">提交预约订单</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}